<template>
	<view>
		<topbar title="置顶管理" jt_c="2" background="background:#E23C63;color:#fff;"></topbar>
		<view class="content" v-if="type > 0">
				<view style="margin-bottom: 20rpx;">置顶时长</view>
				<u-input style="margin-bottom: 30rpx;" v-model="zd_time" @blur="zongjia(zd_time)" type="number" :border="true" placeholder="请输入置顶时长"></u-input>
				<view class="dis_f_l_c" style="margin-bottom: 60rpx;">
					<view style="margin-right: 20rpx;">单价：{{price}}元1小时</view>
					<view>总计：{{zong_price}}元</view>
					<view style="color: red;margin-left: 10rpx;" v-if="user.topnum">免费置顶剩余{{user.topnum}}次</view>
				</view>
				<view @click="type_show = true" class="zf_btn dis_f_c_c">支付</view>
				<u-keyboard
					default=""
					ref="uKeyboard" 
					mode="number" 
					:mask="true" 
					:mask-close-able="false"
					:dot-enabled="false" 
					v-model="show"
					:safe-area-inset-bottom="true"
					:tooltip="false"
					@change="onChange"
					@backspace="onBackspace">
					<view>
						<view class="u-text-center u-padding-20 money">
							<text>{{zong_price}}</text>
							<text class="u-font-20 u-padding-left-10">{{type_money}}</text>
							<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
								<u-icon name="close" color="#333333" size="28"></u-icon>
							</view>
						</view>
						<view class="u-flex u-row-center">
							<u-message-input 
								mode="box" 
								:maxlength="6"
								:dot-fill="true"
								v-model="password"
								:disabled-keyboard="true"
								@finish="finish"
							></u-message-input>
						</view>
						<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
					</view>
				</u-keyboard>
		</view>
		<view class="content" v-else>
				<view style="margin-bottom: 20rpx;color: red;text-align: center;">广告置顶时长一天</view>
				<!-- <u-input style="margin-bottom: 30rpx;" v-model="zd_time" @blur="zongjia(zd_time)" type="number" :border="true" placeholder="请输入置顶时长"></u-input> -->
				<view class="dis_f_l_c" style="margin-bottom: 60rpx;">
					<view style="margin-right: 20rpx;">单价：{{price}}元/天</view>
					<!-- <view>总计：200元</view> -->
					<!-- <view style="color: red;margin-left: 10rpx;" v-if="user.topnum">免费置顶剩余{{user.topnum}}次</view> -->
				</view>
				<view @click="type_show = true" class="zf_btn dis_f_c_c">支付</view>
				<u-keyboard
					default=""
					ref="uKeyboard" 
					mode="number" 
					:mask="true" 
					:mask-close-able="false"
					:dot-enabled="false" 
					v-model="show"
					:safe-area-inset-bottom="true"
					:tooltip="false"
					@change="onChange"
					@backspace="onBackspace">
					<view>
						<view class="u-text-center u-padding-20 money">
							<text>{{zong_price}}</text>
							<text class="u-font-20 u-padding-left-10">{{type_money}}</text>
							<view class="u-padding-10 close" data-flag="false" @tap="showPop(false)">
								<u-icon name="close" color="#333333" size="28"></u-icon>
							</view>
						</view>
						<view class="u-flex u-row-center">
							<u-message-input 
								mode="box" 
								:maxlength="6"
								:dot-fill="true"
								v-model="password"
								:disabled-keyboard="true"
								@finish="finish"
							></u-message-input>
						</view>
						<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view>
					</view>
				</u-keyboard>
				
				
		</view>
		<u-popup v-model="type_show" mode="center" width="400" height="300" border-radius="20">
			<view class="dis_f_co_l_c tc_pay">
				<view class="dis_f_l_c" @click="pay_show(1)" style="margin-left: 100rpx;">
					<image src="../../static/mine/lingqian.png" mode=""></image>
					<view>零钱</view>	
				</view>
				<view class="dis_f_l_c" @click="pay_show(2)" style="margin-left: 100rpx;">
					<image src="../../static/mine/lingqian.png" mode=""></image>
					<view>金币</view>	
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zd_time:'',
				price:1,
				password:'',
				show:false,
				id:0,
				type:0,
				user:[],
				zong_price:0,
				
				type_show:false,
				pay_type:0,//支付方式 1 零钱 2 金币
				type_money:'元',
			};
		},
		onLoad(e){
			this.id = e.id;
			this.type = e.type;
		},
		onShow() {
			if (uni.getStorageSync('token') == '') {
				this.$.ti_shi('请先登录账号');
				var that = this;
				setTimeout(function() {
					that.$.open('/pages/login/login');
				}, 2000); 
			}
			this.$.ajax(1, 'post', 'index/getuser', {
				uid:uni.getStorageSync('uid'),
				token:uni.getStorageSync('token')
			}, (res) => {
				if(res.code == 1){
					this.user = res.userinfo;
					if (this.type == 1) {
						//获取悬赏后台设置参数
						this.$.ajax(1, 'post', 'task/get_sysconfig', {
						}, (res) => {
							if(res.code == 1){
								if (this.user.isvip > 0) {
									this.price = res.data.vip_top_task_money;
								}else{
									this.price = res.data.top_task_money;
								}
							}else{
									this.$.ti_shi(res.msg);
								}
						})
					}else if (this.type == 2) {
						//获取悬赏后台设置参数
						this.$.ajax(1, 'post', 'task/get_sysconfig', {
						}, (res) => {
							if(res.code == 1){
								if (this.user.isvip > 0) {
									this.price = res.data.vip_top_fans_money;
								}else{
									this.price = res.data.top_fans_money;
								}
							}else{
									this.$.ti_shi(res.msg);
								}
						})
					}else{
						//获取悬赏后台设置参数
						this.$.ajax(1, 'post', 'index/get_sysconfig', {
						}, (res) => {
							if(res.code == 1){
								if (this.user.isvip > 0) {
									this.price = res.data.vip_zhiding_price;
									this.zong_price = res.data.vip_zhiding_price;
								}else{
									this.price = res.data.zhiding_price;
									this.zong_price = res.data.zhiding_price;
								}
							}else{
									this.$.ti_shi(res.msg);
								}
						})
					}
				}else{
						this.$.ti_shi(res.msg);
						if(res.code == 9) {
							var that = this;
							setTimeout(function() {
								that.$.open('/pages/login/login');
							}, 2000);
						}  
					}
			})
		},
		methods:{
			pay_show(e) {
				this.pay_type = e;
				this.show = true;
				this.type_show = false;
				if(e == 1) {
					this.type_money = '元';
				}else{
					this.type_money = '币';
				}
			},
			zongjia(){
				if (this.user.topnum >= this.zd_time) {
					this.zong_price = 0;
				}else{
					this.zong_price = (this.zd_time - this.user.topnum)*this.price;
				}
			},
			onChange(val){
				// console.log(this.password)
				if(this.password.length<6){
					this.password += val;
					
				}
				
				if(this.password.length>=6){
					this.pay();
				}
			},
			onBackspace(e){
				if(this.password.length>0){
					this.password = this.password.substring(0,this.password.length-1);
				}
			},
			showPop(flag = true){
				this.password = '';
				this.show = flag;
			},
			pay(){
				if (this.type > 0) {
					if (this.zd_time < 1) {
						this.$.ti_shi('置顶时长不能小于1')
					}
					var int = /^-?[1-9][0-9]*$/;
					if(!int.test(this.zd_time)) {
						this.$.ti_shi('请输入整数')
						return;
					}
				}
				
				
				if(this.password == ''){
					this.$.ti_shi('请输入密码')
					return;
				}
				if (this.type == 1) {
					if (this.id > 0) {
						this.$.ajax(1, 'post', 'task/top_task', {
							uid:uni.getStorageSync('uid'),
							token:uni.getStorageSync('token'),
							password:this.password,
							id:this.id,
							topping_length:this.zd_time,
							pay_type:this.pay_type,
						}, (res) => {
							console.log(res)
							if(res.code == 1){
								this.$.ti_shi(res.msg)
								var that = this;
								setTimeout(function() {
									that.$.open('/pages/xuan_shang/xs_gl');
								}, 2000);
							}else{
								this.password = '';
								this.$.ti_shi(res.msg);
								if(res.code == 9) {
									var that = this;
									setTimeout(function() {
										that.$.open('/pages/login/login');
									}, 2000);
								}  
							}
						})
					}else{
						this.$.ti_shi('参数错误');
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/xuan_shang/xs_gl');
						}, 2000);
					}
				}else if(this.type == 0){
					this.$.ajax(1, 'post', 'index/checkpaypassword', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						password:this.password,
						
					}, (res) => {
						console.log(res)
						if(res.code == 1){
							this.$.ajax(1, 'post', 'index/setguangtop', {
								uid:uni.getStorageSync('uid'),
								token:uni.getStorageSync('token'),
								content:this.text,
								id:this.id,
								pay_type:this.pay_type,
							}, (res) => {
								console.log(res)
								if(res.code == 1){
									this.show = false
									this.password = ''
									this.$.ti_shi(res.msg)
									setTimeout( () => {
										uni.switchTab({
											url:'/pages/index/index'
										})
									}, 1000)
									
								}else{
									this.password = ''
									this.$.ti_shi(res.msg)
								}
								
							})
							// this.$.ti_shi(res.msg)
						}else{
							this.password = ''
							this.$.ti_shi(res.msg)
						}
						
					})
				}else{
					if (this.id > 0) {
						this.$.ajax(1, 'post', 'fans/top_fans', {
							uid:uni.getStorageSync('uid'),
							token:uni.getStorageSync('token'),
							password:this.password,
							id:this.id,
							topping_length:this.zd_time,
							pay_type:this.pay_type,
						}, (res) => {
							console.log(res)
							if(res.code == 1){
								this.$.ti_shi(res.msg)
								var that = this;
								setTimeout(function() {
									that.$.open('/pages/ren_mai/rm_gl');
								}, 2000);
							}else{
								this.password = '';
								this.$.ti_shi(res.msg);
								if(res.code == 9) {
									var that = this;
									setTimeout(function() {
										that.$.open('/pages/login/login');
									}, 2000);
								}  
							}
						})
					}else{
						this.$.ti_shi('参数错误');
						var that = this;
						setTimeout(function() {
							that.$.open('/pages/ren_mai/rm_gl');
						}, 2000);
					}
				}
				
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.content{
		width: 100%;
		padding: calc(var(--status-bar-height) + 108rpx) 24rpx 0 24rpx;
		
	}
	.money{
		font-size: 80rpx;
		color: $u-type-warning;
		position: relative;
		
		.close{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			line-height: 28rpx;
			font-size: 28rpx;
		}
	}
	.tips{
		color:$u-tips-color;
	}
	.zf_btn{
		color: #fff;
		background-color: #E23C63;
		border-radius: 20rpx;
		width: 100%;
		height: 88rpx;
	}
	
	.tc_pay{
		width: 100%;
		// padding: 20rpx;
		height: 100%;
		
		image{
			width: 60rpx;
			height: 60rpx;
			margin-right: 20rpx;
			
		}
	}
	.tg_bz {
		position: fixed;
		z-index: 999;
		font-size: 22rpx;
		line-height: 32rpx;
		top: calc(var(--status-bar-height) + 30rpx);
		right: 48rpx;
		color: #fff;
	
		image {
			width: 34rpx;
			height: 34rpx;
			margin-right: 6rpx;
		}
	
	}
</style>
